<template>
    <div class="relative ">
        <div class=" transition-all absolute inset-0 z-[-1] bg-gradient-to-r " :class="colors[slideIndex].bgColor">
            <div class="h-full bg-gradient-to-t from-white"></div>
        </div>
        <div class="h-16"></div>
        <div class="h-full ">
            <swiper :effect="'coverflow'" :autoplay="{
                delay: 2500,
                disableOnInteraction: false,
            }" @slideChange="onSlideChange" :grabCursor="true" :centeredSlides="true" :space-between="10"
                :slidesPerView="'auto'" :coverflowEffect="{
                    rotate: 0,
                    stretch: 0,
                    depth: 0,
                    scale: 0.95,
                    slideShadows: false,
                }" :modules="swiperModules">
                <swiper-slide v-for="(item, index) in colors">
                    <RouterLink :to="{
                        name: 'goods',
                        params: { id: index }
                    }">
                        <div class="w-full h-40 bg-top bg-no-repeat bg-cover rounded-lg"
                            :style="`background-image:url(${item.src})`"></div>
                    </RouterLink>
                </swiper-slide>
            </swiper>
        </div>
    </div>
</template>
    
<script setup lang='ts'>
import "swiper/css/effect-coverflow";
import 'swiper/css';
import { EffectCoverflow, Autoplay, Swiper as SwiperClass } from "swiper";
import { Swiper, SwiperSlide } from 'swiper/vue';
import b1 from '~/assets/banner/1.jpg'
import b2 from '~/assets/banner/2.jpg'
import b3 from '~/assets/banner/3.jpg'
import b4 from '~/assets/banner/4.jpg'
const swiperModules = [
    EffectCoverflow,
    Autoplay
];
const slideIndex = ref(0);
const onSlideChange = ({ activeIndex }: SwiperClass) => {
    slideIndex.value = activeIndex
}
const colors = [
    {
        color: 'bg-[#f09841]',
        bgColor: 'from-[#363636] to-[#d7d7d7]',
        src: b1,
    },
    {
        color: 'bg-[#51a4ed]',
        bgColor: 'from-[#ed8946] to-[#f2c3ae]',
        src: b2,
    },
    {
        color: 'bg-[#f2a8a7]',
        bgColor: 'from-[#344628] to-[#fdd573]',
        src: b3,
    },
]
</script>
    
<style lang="scss" scoped>
:deep(.swiper-slide) {
    @apply w-5/6;
}
</style>